<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->

<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>Shopping cart | Metronic Shop UI</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../bootstrap/js/project/user/shop/shoppingCart/css/bootstrap.min.css" rel="stylesheet">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="../bootstrap/user/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="../bootstrap/user/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <link href="../layui/css/layui.css" rel="stylesheet">
    <style>
        .shopping-cart-data td, .checkout-page td {
            vertical-align: top;
            padding: 10px 20px 20px 0;
            border-bottom: solid 1px #ecebeb;
        }

        #table > thead > tr > th {
            text-align: center;
        }

        table {
            table-layout: fixed;
            width: 100%;
        }

        td {
            word-break: break-all;
        }
    </style>
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<div id="wrapper">
    <!-- BEGIN TOP BAR -->
    <div th:include="common/userShopHead :: head"></div>
    <!-- END TOP BAR -->
    <div th:include="common/userShopHead :: head-navigation"></div>
    <!-- BEGIN HEADER -->
    <!--  <div th:include="common/userShopHead :: head-navigation"></div>-->
    <!-- END HEADER -->
    <div class="main">
        <div class="container" style="padding:0 0 0 0 ;">
            <div style="background-color: #ececec;height: 50px;margin-bottom: 10px;"><p style="padding-top: 15px;padding-left: 10px;
       color: #767f88;font-weight: 900;">用户信息:</p>
            </div>
        </div>
        <div class="container" style="border: 1px solid #eaeaea; padding: 0 0 30px 0;">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">个人信息</li>
                    <li>修改密码</li>
                    <li>新增地址</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form">
                            <form class="form-horizontal" id="myForm" style="padding: 10px 10% 10px 0;" action="">
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">登录账号</div>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="userAccount"
                                               v-model="user.userAccount"
                                               id="userAccount" readonly
                                        />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">昵称</div>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="userName" v-model="user.userName"
                                               id="userName"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">手机</div>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control"
                                               name="phone"
                                               v-model="user.phone" id="phone" lay-verify="required|phone|number"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">邮箱</div>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control"
                                               name="email"
                                               v-model="user.email" id="email" lay-verify="email"/>
                                    </div>
                                </div>
                            </form>
                            <input type="button" class="btn btn-primary" value="修改"
                                   style="margin-left: 50%;" lay-submit lay-filter="updateInfomation"/>

                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <!-- 修改密码-->
                        <div class="layui-form">
                            <form class="form-horizontal" style="padding: 10px 10% 10px 0;" action="">
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">输入旧密码</div>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" name="oldpassword"
                                               v-model="password.oldpassword" id="oldpassword"
                                               lay-verify="required"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">重新输入一遍</div>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" name="password"
                                               v-model="password.password"
                                               id="password"
                                               lay-verify="required|password"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">输入新的密码</div>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" name="newPassword"
                                               v-model="password.newPassword"
                                               id="newPassword" lay-verify="required|pass"/>
                                    </div>
                                </div>
                            </form>
                            <input type="button" class="btn btn-primary" value="修改"
                                   style="margin-left: 50%;" lay-submit lay-filter="updatePassword"/>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <!-- 收货地址 -->
                        <div class="layui-form">
                            <form class="form-horizontal" style="padding: 10px 10% 10px 0;" action="">
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">联系人</div>
                                    <div class="col-sm-10">
                                        <input type="hidden" v-model="order.id">
                                        <input type="text" class="form-control"
                                               v-model="order.addressee"
                                               lay-verify="required"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">联系手机</div>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control"
                                               v-model="order.phone"
                                               lay-verify="required|phone"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-2 control-label">收货地址</div>
                                    <div class="col-sm-10">
                                        <textarea type="text" class="form-control" name="deliveryAddr"
                                                  v-model="order.deliveryAddr"
                                                  id="deliveryAddr" lay-verify="required"
                                                  style="height:100px "></textarea>
                                    </div>
                                </div>
                            </form>
                            <input type="button" class="btn btn-primary" value="提交"
                                   style="margin-left: 50%;" lay-submit lay-filter="saveAddress"/>
                        </div>
                        <div class="container" style="padding-left: 0;padding-top: 20px;">
                            <div style="background-color: #ececec;height: 50px;margin-bottom: 10px;"><p style="padding-top: 15px;padding-left: 10px;
       color: #767f88;font-weight: 900;">已存地址:</p></div>
                            <div>
                                <table border="1" class="john_table" style="border: 1px solid #ccc;text-align: center;"
                                       id="table">
                                    <thead>
                                    <tr style="height: 40px;background: #ececec;">
                                        <th width="50px">序号</th>
                                        <th width="100px">联系人</th>
                                        <th width="100xp">联系手机</th>
                                        <th width="400px">收货地址</th>
                                        <th width="50px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in addressList" style="height: 40px;">
                                        <td>{{index+1}}</td>
                                        <td>{{item.addressee}}</td>
                                        <td>{{item.phone}}</td>
                                        <td>{{item.deliveryAddr}}</td>
                                        <td><a class="btn btn-primary"
                                               style="display: block;margin: 10px;"
                                               @click="edit(item.id)">
                                            &nbsp;编辑</a></td>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- BEGIN BRANDS -->
<div th:include="common/Head :: brands"></div>
<!-- END BRANDS -->


<!-- BEGIN fast view of a product -->
<div id="product-pop-up" style="display: none; width: 700px;">
    <div class="product-page product-pop-up">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-3">
                <div class="product-main-image">
                    <img src="/templates/upload/model7.jpg"
                         alt="Cool green dress with red bell"
                         class="img-responsive">
                </div>
                <div class="product-other-images">
                    <a href="#" class="active"><img alt="Berry Lace Dress"
                                                    src="/templates/upload/model3.jpg"></a>
                    <a href="#"><img alt="Berry Lace Dress"
                                     src="/templates/upload/model4.jpg"></a>
                    <a href="#"><img alt="Berry Lace Dress"
                                     src="/templates/upload/model5.jpg"></a>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-9">
                <h1>Cool green dress with red bell</h1>
                <div class="price-availability-block clearfix">
                    <div class="price">
                        <strong><span>$</span>47.00</strong>
                        <em>$<span>62.00</span></em>
                    </div>
                    <div class="availability">
                        Availability: <strong>In Stock</strong>
                    </div>
                </div>
                <div class="description">
                    <p>Lorem ipsum dolor ut sit ame dolore adipiscing elit, sed nonumy nibh sed euismod laoreet
                        dolore
                        magna aliquarm erat volutpat
                        Nostrud duis molestie at dolore.</p>
                </div>
                <div class="product-page-options">
                    <div class="pull-left">
                        <label class="control-label">Size:</label>
                        <select class="form-control input-sm">
                            <option>L</option>
                            <option>M</option>
                            <option>XL</option>
                        </select>
                    </div>
                    <div class="pull-left">
                        <label class="control-label">Color:</label>
                        <select class="form-control input-sm">
                            <option>Red</option>
                            <option>Blue</option>
                            <option>Black</option>
                        </select>
                    </div>
                </div>
                <div class="product-page-cart">
                    <div class="product-quantity">
                        <input id="product-quantity3" type="text" value="1" readonly class="form-control input-sm">
                    </div>
                    <button class="btn btn-primary" type="submit">Add to cart</button>
                    <button class="btn btn-default" type="submit">More details</button>
                </div>
            </div>

            <div class="sticker sticker-sale"></div>
        </div>
    </div>
</div>
</div>
<!-- END fast view of a product -->
<script src="../layui/layui.js"></script>

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../bootstrap/user/plugins/respond.min.js"></script>
<![endif]-->
<script src="../bootstrap/user/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/back-to-top.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="../bootstrap/user/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- pop up -->
<script type="text/javascript" src="../bootstrap/user/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script src="../bootstrap/user/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js"
        type="text/javascript"></script>

<!-- Quantity -->
<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/project/search.js"></script>

<script src="../js/shoppingOrder/js/shoppingUser.js"></script>
<script type="text/javascript" th:inline="javascript">


    var layer;

    layui.use('element', function () {
        var element = layui.element;

        //…
    });
    layui.use('form', function () {
        var form = layui.form;

        form.on('submit(saveAddress)', function (data) {
            vm.saveAddress()
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(updatePassword)', function (data) {
            vm.updatePassword()
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(updateInfomation)', function (data) {
            vm.update()
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.verify({
            password: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (vm.password.oldpassword != vm.password.password) {
                    return '两次密码不一致，请重新输入';
                }

            },
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });
    });

    $(document).ready(function () {
        $('.brands').css("display", "none");
        layui.use("layer", function () {
            layer = layui.layer;  //layer初始化
        })

        $('.search-btn').click(function () {

            if ($('.search-btn').hasClass('show-search-icon')) {
                if ($(window).width() > 767) {
                    $('.search-box').fadeOut(300);
                } else {
                    $('.search-box').fadeOut(0);
                }
                $('.search-btn').removeClass('show-search-icon');
            } else {
                if ($(window).width() > 767) {
                    $('.search-box').fadeIn(300);
                } else {
                    $('.search-box').fadeIn(0);
                }
                $('.search-btn').addClass('show-search-icon');
            }
        });
    })

    /*

    $(document).ready(function () {
        layui.use("layer", function () {
            layer = layui.layer;  //layer初始化
        })
    });
*/
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>